<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Hello World | 忘崽牛奶</title><meta name="author" content="John Doe"><meta name="copyright" content="John Doe"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta name="description" content="WebGL概述​    利用javasript与着色器语言(GLSL)在web上开发三维应用的库。 矩阵与向量矩阵 webgl中矩阵是列主序，传入数据时，按列的方向传入。 获得矩阵元素方法 取得某一列所有元素：m1[0] 取得某个元素: m1[0] [2],m1[0].y []里的元素只能为常量索引值    矢量 为单行矢量 取得矢量元素方法 [x,y,z,w] [r,g,b,a] [s,t,p,">
<meta property="og:type" content="article">
<meta property="og:title" content="Hello World">
<meta property="og:url" content="http://example.com/2013/07/13/mypost/index.html">
<meta property="og:site_name" content="忘崽牛奶">
<meta property="og:description" content="WebGL概述​    利用javasript与着色器语言(GLSL)在web上开发三维应用的库。 矩阵与向量矩阵 webgl中矩阵是列主序，传入数据时，按列的方向传入。 获得矩阵元素方法 取得某一列所有元素：m1[0] 取得某个元素: m1[0] [2],m1[0].y []里的元素只能为常量索引值    矢量 为单行矢量 取得矢量元素方法 [x,y,z,w] [r,g,b,a] [s,t,p,">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="http://example.com/img/castle.jpg">
<meta property="article:published_time" content="2013-07-13T12:46:25.000Z">
<meta property="article:modified_time" content="2021-03-23T11:11:13.671Z">
<meta property="article:author" content="John Doe">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="http://example.com/img/castle.jpg"><link rel="shortcut icon" href="/img/favicon.png"><link rel="canonical" href="http://example.com/2013/07/13/mypost/"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//busuanzi.ibruce.info"/><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" media="print" onload="this.media='all'"><script>const GLOBAL_CONFIG = { 
  root: '/',
  algolia: undefined,
  localSearch: undefined,
  translate: undefined,
  noticeOutdate: undefined,
  highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":false},
  copy: {
    success: '复制成功',
    error: '复制错误',
    noSupport: '浏览器不支持'
  },
  relativeDate: {
    homepage: false,
    post: false
  },
  runtime: '',
  date_suffix: {
    just: '刚刚',
    min: '分钟前',
    hour: '小时前',
    day: '天前',
    month: '个月前'
  },
  copyright: undefined,
  lightbox: 'fancybox',
  Snackbar: undefined,
  source: {
    jQuery: 'https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js',
    justifiedGallery: {
      js: 'https://cdn.jsdelivr.net/npm/justifiedGallery/dist/js/jquery.justifiedGallery.min.js',
      css: 'https://cdn.jsdelivr.net/npm/justifiedGallery/dist/css/justifiedGallery.min.css'
    },
    fancybox: {
      js: 'https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.js',
      css: 'https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.css'
    }
  },
  isPhotoFigcaption: false,
  islazyload: false,
  isanchor: false
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = { 
  isPost: true,
  isHome: false,
  isHighlightShrink: false,
  isToc: true,
  postUpdate: '2021-03-23 19:11:13'
}</script><noscript><style type="text/css">
  #nav {
    opacity: 1
  }
  .justified-gallery img {
    opacity: 1
  }

  #recent-posts time,
  #post-meta time {
    display: inline !important
  }
</style></noscript><script>(win=>{
    win.saveToLocal = {
      set: function setWithExpiry(key, value, ttl) {
        if (ttl === 0) return
        const now = new Date()
        const expiryDay = ttl * 86400000
        const item = {
          value: value,
          expiry: now.getTime() + expiryDay,
        }
        localStorage.setItem(key, JSON.stringify(item))
      },

      get: function getWithExpiry(key) {
        const itemStr = localStorage.getItem(key)

        if (!itemStr) {
          return undefined
        }
        const item = JSON.parse(itemStr)
        const now = new Date()

        if (now.getTime() > item.expiry) {
          localStorage.removeItem(key)
          return undefined
        }
        return item.value
      }
    }
  
    win.getScript = url => new Promise((resolve, reject) => {
      const script = document.createElement('script')
      script.src = url
      script.async = true
      script.onerror = reject
      script.onload = script.onreadystatechange = function() {
        const loadState = this.readyState
        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
        script.onload = script.onreadystatechange = null
        resolve()
      }
      document.head.appendChild(script)
    })
  
      win.activateDarkMode = function () {
        document.documentElement.setAttribute('data-theme', 'dark')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
        }
      }
      win.activateLightMode = function () {
        document.documentElement.setAttribute('data-theme', 'light')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
        }
      }
      const t = saveToLocal.get('theme')
    
          if (t === 'dark') activateDarkMode()
          else if (t === 'light') activateLightMode()
        
      const asideStatus = saveToLocal.get('aside-status')
      if (asideStatus !== undefined) {
        if (asideStatus === 'hide') {
          document.documentElement.classList.add('hide-aside')
        } else {
          document.documentElement.classList.remove('hide-aside')
        }
      }
    })(window)</script><meta name="generator" content="Hexo 5.4.0"><link rel="alternate" href="/atom.xml" title="忘崽牛奶" type="application/atom+xml">
</head><body><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="author-avatar"><img class="avatar-img" src="https://i.loli.net/2021/02/24/5O1day2nriDzjSu.png" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="site-data"><div class="data-item is-center"><div class="data-item-link"><a href="/archives/"><div class="headline">文章</div><div class="length-num">4</div></a></div></div></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> Home</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> Archives</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> Tags</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> Categories</span></a></div><div class="menus_item"><a class="site-page" href="/music/"><i class="fa-fw fas fa-music"></i><span> Music</span></a></div><div class="menus_item"><a class="site-page" href="/movies/"><i class="fa-fw fas fa-video"></i><span> Movie</span></a></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw fas fa-link"></i><span> Link</span></a></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fas fa-heart"></i><span> About</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('/img/castle.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">忘崽牛奶</a></span><div id="menus"><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> Home</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> Archives</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> Tags</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> Categories</span></a></div><div class="menus_item"><a class="site-page" href="/music/"><i class="fa-fw fas fa-music"></i><span> Music</span></a></div><div class="menus_item"><a class="site-page" href="/movies/"><i class="fa-fw fas fa-video"></i><span> Movie</span></a></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw fas fa-link"></i><span> Link</span></a></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fas fa-heart"></i><span> About</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">Hello World</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2013-07-13T12:46:25.000Z" title="发表于 2013-07-13 20:46:25">2013-07-13</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2021-03-23T11:11:13.671Z" title="更新于 2021-03-23 19:11:13">2021-03-23</time></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="Hello World"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h1 id="WebGL"><a href="#WebGL" class="headerlink" title="WebGL"></a>WebGL</h1><h2 id="概述"><a href="#概述" class="headerlink" title="概述"></a>概述</h2><p>​    利用javasript与着色器语言(GLSL)在web上开发三维应用的库。</p>
<h2 id="矩阵与向量"><a href="#矩阵与向量" class="headerlink" title="矩阵与向量"></a>矩阵与向量</h2><h3 id="矩阵"><a href="#矩阵" class="headerlink" title="矩阵"></a>矩阵</h3><ol>
<li>webgl中矩阵是列主序，传入数据时，按列的方向传入。</li>
<li>获得矩阵元素方法<ol>
<li>取得某一列所有元素：m1[0]</li>
<li>取得某个元素: m1[0] [2],m1[0].y</li>
<li>[]里的元素只能为常量索引值</li>
</ol>
</li>
</ol>
<h2 id="矢量"><a href="#矢量" class="headerlink" title="矢量"></a>矢量</h2><ol>
<li>为单行矢量</li>
<li>取得矢量元素方法<ol>
<li>[x,y,z,w] [r,g,b,a] [s,t,p,q] : v1.x</li>
<li>v1.xy,v1.xz 取得任意位置元素</li>
<li>v1[0]</li>
</ol>
</li>
</ol>
<h2 id="运算"><a href="#运算" class="headerlink" title="运算"></a>运算</h2><ol>
<li>加法<ol>
<li>矢量与浮点数：矢量的各个分量与浮点数运算</li>
<li>矢量与矢量：两个矢量的对应分量进行运算</li>
<li>矩阵与浮点数：矩阵的各个分量与浮点数进行运算</li>
</ol>
</li>
<li>乘法：符合矩阵的乘法规则</li>
</ol>
<h2 id="变换"><a href="#变换" class="headerlink" title="变换"></a>变换</h2><ol>
<li><p>矩阵的相乘，必须第一个矩阵的列与第二个矩阵的行数相等，才能进行。</p>
<img src="E:/学习笔记/img/matrixMultiply.png" style="zoom: 67%;" >

<p>所有的变换均为四维齐次坐标矩阵，目的是为了将平移操作与其他操作统一化。</p>
</li>
<li><p>平移</p>
</li>
</ol>
<h2 id="坐标系"><a href="#坐标系" class="headerlink" title="坐标系"></a>坐标系</h2><ol>
<li><strong>canvas坐标</strong></li>
</ol>
<img src="C:\Users\lenovo\AppData\Roaming\Typora\typora-user-images\image-20201017142019927.png" alt="image-20201017142019927" style="zoom:50%;" />



<ol start="2">
<li><strong>webgl坐标</strong></li>
</ol>
<img src = "E:/学习笔记/img/3维.png">

<ol start="3">
<li><p>图像坐标<img src="C:\Users\lenovo\AppData\Roaming\Typora\typora-user-images\image-20201018091650709.png" alt="image-20201018091650709"></p>
</li>
<li><p>webgl纹理坐标<img src="C:\Users\lenovo\AppData\Roaming\Typora\typora-user-images\image-20201018104501059.png" alt="image-20201018104501059"></p>
</li>
<li><p><strong>canvas坐标与webgl坐标对应关系</strong></p>
<img src="C:\Users\lenovo\AppData\Roaming\Typora\typora-user-images\image-20201017150122339.png" alt="image-20201017150122339" style="zoom: 67%;" />

<h2 id="零碎知识点"><a href="#零碎知识点" class="headerlink" title="零碎知识点"></a>零碎知识点</h2><ol>
<li><p>gl.clearColor(),实际是指定用什么来清屏，在调用gl.clear(gl.COLOR_BUFFER_BIT),用之前指定的color来进行清屏操作</p>
</li>
<li><p>缓冲区对象，即webgl中的一块内存区域。</p>
</li>
<li><p>gl.drawArrays(),第二个参数，从缓冲区的第几个顶点开始绘制，</p>
<p>第三个参数指定缓冲区有几个顶点，可以绘制的所有基本图形：</p>
<p><img src="C:\Users\lenovo\AppData\Roaming\Typora\typora-user-images\image-20201017163457210.png" alt="image-20201017163457210" style="zoom:200%;" /><img src="C:\Users\lenovo\AppData\Roaming\Typora\typora-user-images\image-20201017163921787.png" alt="image-20201017163921787">绘制三角形带时，按逆时针方向</p>
</li>
<li><p>逆时针的定义，观察者在某个轴的正方向朝此轴的正方向观察时，此时的逆时针就是逆时针。遵循右手定则，大拇指指向旋转轴的正方向，四指的方向就是逆时针的方向。</p>
</li>
<li><p>平移矩阵<img src="C:\Users\lenovo\AppData\Roaming\Typora\typora-user-images\image-20201017170652226.png" alt="image-20201017170652226"></p>
</li>
<li><p>旋转矩阵<img src="C:\Users\lenovo\AppData\Roaming\Typora\typora-user-images\image-20201017170720243.png" alt="image-20201017170720243"></p>
</li>
<li><p>缩放矩阵<img src="C:\Users\lenovo\AppData\Roaming\Typora\typora-user-images\image-20201017170753912.png" alt="image-20201017170753912"></p>
</li>
<li><p>矩阵变换等式：变换后的矩阵 = 变换矩阵 * 原矩阵</p>
</li>
<li><p><strong>GLSL中的三种变量</strong></p>
<ol>
<li>attribute,对每个顶点来说都不同的数据</li>
<li>uniform,对每个顶点来说都相同的数据</li>
<li>varing,用于从顶点着色器向片元着色器传递数据，相同的变量名，为每个顶点指定颜色，由顶点着色器向片元着色器传入varing值时，颜色会被内插得到值。</li>
</ol>
</li>
<li><p>GLSL中对片元着色器的float没有默认的精度限制：precision mediump float</p>
</li>
<li><p><strong>在默认情况下，webgl按照顶点在缓冲区中的顺序来绘制顶点的，会造成前后的遮挡，通过开启:gl.enable(gl.DEPTH_TEST)，开启隐藏面消除，在绘制每一帧前，清除深度缓冲区，实际是用深度缓冲区的值，进行覆盖。上一帧的深度信息储存在z缓冲区中，进行清除（置零），重新写入深度信息，进行深度检测，webgl自动判断遮挡关系，从而决定进不进行绘制。</strong></p>
</li>
<li><p>当两个多边形过于接近时，会发生深度冲突，原因为深度缓冲的精度不满足要求了，开启多边形偏移：gl.enable(gl.POLYGON_OFFSET_FILL),gl.polygonoffset(1.0,1.0)</p>
</li>
<li><p>webgl中对于平面的正面与背面的定义：当从一个方向看向平面时，此平面的顶点绘制顺序是顺时针，则此面为正面，反之为背面。</p>
</li>
</ol>
</li>
</ol>
<h2 id="绑定缓冲区步骤"><a href="#绑定缓冲区步骤" class="headerlink" title="绑定缓冲区步骤"></a>绑定缓冲区步骤</h2><ol>
<li>创建缓冲区对象:gl.createBuffer()</li>
<li>绑定缓冲区对象，必须绑定到目标上:gl.bindBuffer()</li>
<li>将数据写入缓冲区对象:gl.bufferData()</li>
<li>将缓冲区对象中的某部分数据分配给一个attribute变量上:gl.vertexAttributePointer()</li>
<li>开启attribute变量:gl.enableVertexAttribArray()</li>
<li>图示：<img src="C:\Users\lenovo\AppData\Roaming\Typora\typora-user-images\image-20201017162931220.png" alt="image-20201017162931220" style="zoom:200%;" /></li>
</ol>
<h2 id="顶点着色器与片元着色器的工作流程"><a href="#顶点着色器与片元着色器的工作流程" class="headerlink" title="顶点着色器与片元着色器的工作流程"></a>顶点着色器与片元着色器的工作流程</h2><ul>
<li>图示：<img src="C:\Users\lenovo\AppData\Roaming\Typora\typora-user-images\image-20201018090515002.png" alt="image-20201018090515002"></li>
<li>首先，顶点接受顶点信息，一旦接受到顶点信息，则此顶点进入图形装配阶段，暂时储存起来 ，根据gl.drawArrays的第一个参数，来判断是否装配完一个图元（primitives),图像装配完毕后，进行光栅化，转换为片元，片元着色器对每个片元进行着色。<strong>顶点着色器执行次数 = 顶点数，片元着色器执行次数 = 光栅后的片元数</strong></li>
</ul>
<h2 id="WebGL加载纹理图像"><a href="#WebGL加载纹理图像" class="headerlink" title="WebGL加载纹理图像"></a>WebGL加载纹理图像</h2><ul>
<li>加载主要步骤：请求要加载的图像，创建纹理图像(WebGL中)，进行y轴翻转，开启并指定纹理单元，通过控制纹理单元来间接控制图像，设置图像的映射方式，将请求加载的图像分配给纹理图像，将纹理单元传递给取色器变量，执行着色器。基本思想：<strong>加载图像，本质就是给片元颜色进行赋值，通过将纹理的像素即纹素映射到要绘制的图元像素中去，而进行映射必然要设定映射规则。在webgl中不能直接控制纹理图像，通过纹理单元机制来控制纹理图像，将纹理图像绑定至纹理单元上，在纹理图像里存储加载的图像，映射规则。由GLSL中的取色器通过纹理坐标来进行取色，返回赋值给gl_FragColor中，即达到了设置纹理图像的效果。</strong>注：纹理坐标只需要设置为varing变量，由顶点着色器传入片元着色器时，非顶点片元的的纹理坐标由webgl系统插值产生。</li>
<li>创建纹理图像：gl.createTexture()</li>
<li>进行y轴翻转:  gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1)</li>
<li>将纹理图像绑定到目标上，即指定图像的类型:  gl.bindTexture(gl.TEXTURE_2D, texture)</li>
<li>设定纹理的参数，配置纹理对象：gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR)</li>
<li>装载纹理图像： gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB,gl.UNSIGNED_BYTE,image)</li>
<li>将纹理图像传递给取样器:  gl.uniform1i(u_Sampler2D,0)</li>
<li>执行着色器：  gl.drawArrays(gl.TRIANGLE_STRIP, 0, n) //执行着色器</li>
<li>图示：<img src="C:\Users\lenovo\AppData\Roaming\Typora\typora-user-images\image-20201018143709652.png" alt="image-20201018143709652">注：虽然是将图像绑定给纹理单元，但是我们是通过操作gl.TEXTURE_2D来操作图像</li>
</ul>
<h2 id="图形显示在电脑屏幕上的过程"><a href="#图形显示在电脑屏幕上的过程" class="headerlink" title="图形显示在电脑屏幕上的过程"></a>图形显示在电脑屏幕上的过程</h2><ul>
<li><p>几个空间（空间就是由坐标系定义的无限远的空间）</p>
<ul>
<li>世界空间<ul>
<li>由世界坐标系定义的空间，其矩阵用单位矩阵来定义。</li>
</ul>
</li>
<li>模型空间<ul>
<li>每个模型自身的坐标系，原点由使用者自身指定，原点的位置不同，所得到的模型坐标就不相同。</li>
</ul>
</li>
<li>视图空间<ul>
<li>由摄像机的朝向，头部三个方向定义的一个空间</li>
</ul>
</li>
<li>裁剪空间<ul>
<li>不同的摄像机定义的一个裁剪体，定义的封闭空间，位于此空间外的物体将被裁剪，不显示，也存储，提升性能。</li>
</ul>
</li>
<li>标准设备空间<ul>
<li>将两种不同摄像机产生的不同的裁剪空间标准换为一个标准的空间，归一化为一个规范立方体，适应不同设备。</li>
</ul>
</li>
<li>窗口空间<ul>
<li>定义在设备上实际的窗口大小。</li>
</ul>
</li>
</ul>
</li>
<li><p>整体流程：</p>
<ul>
<li>webgl中对于上述变化都有默认的矩阵。默认情况下，其模型坐标系位于世界坐标原点，与世界坐标系重合。视图坐标系z轴与世界坐标系相反，即摄像机朝向z轴的负方向。裁剪空间默认为规范立方体的大小。如果不指定，指定的值在[-1,1]之内就会显示在屏幕上。</li>
<li>以世界坐标系为基准，如果没有每个模型没有自己的模型坐标系，则在描述模型位置的时候，则需要直接指定模型中的各个顶点在世界坐标系中的位置，是不好指定的。我们需要为每一个模型构造一个模型坐标系，直接在属于每个模型的坐标系中指定顶点的位置，然后将模型坐标系的通过<strong>矩阵相乘</strong>转换到世界坐标系中，其实就是模型坐标系原点的变化，模型坐标系中的顶点自然跟着模型坐标系而移动。这种坐标系的构建，单独分离了每个模型。</li>
</ul>
</li>
</ul>
<h2 id="光照"><a href="#光照" class="headerlink" title="光照"></a>光照</h2><ol>
<li><h3 id="颜色"><a href="#颜色" class="headerlink" title="颜色"></a>颜色</h3><ul>
<li>物体表面的基底色（物体在标准白光下的颜色），太阳光是白光，我们描述物体的基底色，就是以我们人眼看到的颜色来定义的。颜色属性是相对于光来说的。</li>
</ul>
</li>
<li><h3 id="反射"><a href="#反射" class="headerlink" title="反射"></a>反射</h3><ul>
<li><p>物体的反射分为两种类型，环境反射与漫反射。</p>
<ul>
<li><p>环境反射，怎么进怎么出，计算公式：环境反射光颜色 = 入射光颜色 * 表面基底色</p>
</li>
<li><p>漫反射，与物体表面的属性有关计算公式 ： 漫反射光颜色 = 入射光颜色 * 表面基底色 * cos(入射角)</p>
<ul>
<li>入射角没法直接得出，需要根据光线方向与平面的法线方向计算出来，cos(入射角) = 光线方向的反方向  <strong>点乘</strong> 平面的法线方向，其中光线方向与平面的法线方向必须进行归一化，如果不进行归一化，则得出的不是一倍的cos(入射角)，点乘公式：<img src="C:\Users\lenovo\AppData\Roaming\Typora\typora-user-images\image-20201019114841156.png" alt="image-20201019114841156">        </li>
</ul>
</li>
<li><p>物体表面反射光颜色 = 漫反射光颜色 + 环境光颜色</p>
</li>
<li></li>
</ul>
</li>
</ul>
</li>
</ol>
</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="mailto:undefined">John Doe</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="http://example.com/2013/07/13/mypost/">http://example.com/2013/07/13/mypost/</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="http://example.com" target="_blank">忘崽牛奶</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"></div><div class="post_share"><div class="social-share" data-image="/img/castle.jpg" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/social-share.js/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/social-share.js/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-full"><a href="/2021/03/23/hello-world/"><img class="prev-cover" src="/img/castle.jpg" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">Hello World</div></div></a></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="card-info-avatar is-center"><img class="avatar-img" src="https://i.loli.net/2021/02/24/5O1day2nriDzjSu.png" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/><div class="author-info__name">John Doe</div><div class="author-info__description"></div></div><div class="card-info-data"><div class="card-info-data-item is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">4</div></a></div></div><a class="button--animated" id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/xxxxxx"><i class="fab fa-github"></i><span>Follow Me</span></a></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn card-announcement-animation"></i><span>公告</span></div><div class="announcement_content">This is my Blog</div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#WebGL"><span class="toc-number">1.</span> <span class="toc-text">WebGL</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%A6%82%E8%BF%B0"><span class="toc-number">1.1.</span> <span class="toc-text">概述</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%9F%A9%E9%98%B5%E4%B8%8E%E5%90%91%E9%87%8F"><span class="toc-number">1.2.</span> <span class="toc-text">矩阵与向量</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%9F%A9%E9%98%B5"><span class="toc-number">1.2.1.</span> <span class="toc-text">矩阵</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%9F%A2%E9%87%8F"><span class="toc-number">1.3.</span> <span class="toc-text">矢量</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%BF%90%E7%AE%97"><span class="toc-number">1.4.</span> <span class="toc-text">运算</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%8F%98%E6%8D%A2"><span class="toc-number">1.5.</span> <span class="toc-text">变换</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%9D%90%E6%A0%87%E7%B3%BB"><span class="toc-number">1.6.</span> <span class="toc-text">坐标系</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%9B%B6%E7%A2%8E%E7%9F%A5%E8%AF%86%E7%82%B9"><span class="toc-number">1.7.</span> <span class="toc-text">零碎知识点</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%BB%91%E5%AE%9A%E7%BC%93%E5%86%B2%E5%8C%BA%E6%AD%A5%E9%AA%A4"><span class="toc-number">1.8.</span> <span class="toc-text">绑定缓冲区步骤</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%A1%B6%E7%82%B9%E7%9D%80%E8%89%B2%E5%99%A8%E4%B8%8E%E7%89%87%E5%85%83%E7%9D%80%E8%89%B2%E5%99%A8%E7%9A%84%E5%B7%A5%E4%BD%9C%E6%B5%81%E7%A8%8B"><span class="toc-number">1.9.</span> <span class="toc-text">顶点着色器与片元着色器的工作流程</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#WebGL%E5%8A%A0%E8%BD%BD%E7%BA%B9%E7%90%86%E5%9B%BE%E5%83%8F"><span class="toc-number">1.10.</span> <span class="toc-text">WebGL加载纹理图像</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%9B%BE%E5%BD%A2%E6%98%BE%E7%A4%BA%E5%9C%A8%E7%94%B5%E8%84%91%E5%B1%8F%E5%B9%95%E4%B8%8A%E7%9A%84%E8%BF%87%E7%A8%8B"><span class="toc-number">1.11.</span> <span class="toc-text">图形显示在电脑屏幕上的过程</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%85%89%E7%85%A7"><span class="toc-number">1.12.</span> <span class="toc-text">光照</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%A2%9C%E8%89%B2"><span class="toc-number">1.12.1.</span> <span class="toc-text">颜色</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%8F%8D%E5%B0%84"><span class="toc-number">1.12.2.</span> <span class="toc-text">反射</span></a></li></ol></li></ol></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/2021/03/24/day01_%E5%8A%A8%E7%AC%94/" title="动笔"><img src="/img/castle.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="动笔"/></a><div class="content"><a class="title" href="/2021/03/24/day01_%E5%8A%A8%E7%AC%94/" title="动笔">动笔</a><time datetime="2021-03-24T13:46:26.799Z" title="发表于 2021-03-24 21:46:26">2021-03-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2021/03/23/day01_%E4%BA%BA%E9%97%B4/" title="但愿你的眼睛，只看得到笑容"><img src="/img/castle.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="但愿你的眼睛，只看得到笑容"/></a><div class="content"><a class="title" href="/2021/03/23/day01_%E4%BA%BA%E9%97%B4/" title="但愿你的眼睛，只看得到笑容">但愿你的眼睛，只看得到笑容</a><time datetime="2021-03-23T11:15:59.736Z" title="发表于 2021-03-23 19:15:59">2021-03-23</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2021/03/23/hello-world/" title="Hello World"><img src="/img/castle.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Hello World"/></a><div class="content"><a class="title" href="/2021/03/23/hello-world/" title="Hello World">Hello World</a><time datetime="2021-03-23T01:30:41.381Z" title="发表于 2021-03-23 09:30:41">2021-03-23</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2013/07/13/mypost/" title="Hello World"><img src="/img/castle.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Hello World"/></a><div class="content"><a class="title" href="/2013/07/13/mypost/" title="Hello World">Hello World</a><time datetime="2013-07-13T12:46:25.000Z" title="发表于 2013-07-13 20:46:25">2013-07-13</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2021 By John Doe</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i></button></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><div class="js-pjax"></div><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script></div></body></html>